<template>
  <div class="box-full bgfff box-border round-4 m-relative overflow-hidden">
    <div class="m-absolute t-0 b-0 r-0 l-0 overflow-hidden">
      <a-table row-key="id" :columns="columns" :data="tableData" :scroll="{ x: false, y: '100%' }">
        <template #level="{ record }">
          <span class="font-bold" :style="{ color: record.level === 'error' ? 'red' : '#333' }">{{
            record.level
          }}</span>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup>
import { v4 } from 'uuid'
const { ipcRenderer } = window.electron
const tableData = ref([])
const columns = [
  {
    title: '时间',
    dataIndex: 'time',
    width: 200,
    align: 'center'
  },
  {
    title: '级别',
    slotName: 'level',
    width: 100,
    align: 'center'
  },
  {
    title: '日志',
    render: ({ record }) => {
      return record?.level === 'error' ? `${record.desc}（${record.source}）` : record.desc
    },
    align: 'center'
  }
]
const getLog = async () => {
  let logData = await window.ipcRenderer.invoke('readLog')
  const tableDataO = []
  for (const key in logData) {
    if (logData.hasOwnProperty(key)) {
      tableDataO.push({
        id: v4(),
        time: key,
        ...logData[key]
      })
    }
  }
  tableData.value = tableDataO.reverse()
}

getLog()
ipcRenderer.on('addLog', async (event, message) => {
  if (message) {
    tableData.value.unshift({
      id: v4(),
      ...message
    })
  }
})
</script>
<style scoped lang="scss"></style>
